<template>
  <div id="newsIndex">
    <!-- 头部 -->
   <InsideHeader :bannerType="bannerType"></InsideHeader>
    <!-- 面包屑 -->
    <!-- <crumb :titleOne="'最新资讯'" :titleTwo="''" :history="0"></crumb> -->
    <div class="crumb">
        <div class="block">  
            <div class="crumbL">
                <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
                <em>></em>
                <nuxt-link :to="{name: 'news-newsIndex'}" class="on">最新资讯</nuxt-link>
                <div class="clear"></div>
            </div>
            <div class="crumbR">
                <nuxt-link :to="{name: 'news-newsCompany'}">公司新闻</nuxt-link>
              <nuxt-link :to="{name: 'news-newProduct'}">新品发布</nuxt-link>
              <nuxt-link :to="{name: 'news-logUpdate'}">资料更新日志</nuxt-link>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>

    <!--内容-->
    <div class="content">
      <!--新品发布-->
      <div class="newsIssue">
        <div class="block">
          <div class="title">
            <span>最新资讯</span>
          </div>
          <nuxt-link :to="{name: 'news-newProduct'}">
            <div class="header">
              <div class="title">新品发布</div>
              <div class="right">
                MORE
                <div>
                  <span></span>
                  <img src="../../static/newsImg/right1.png" />
                </div>
              </div>
            </div>
          </nuxt-link>
          <div class="newProduct">
            <ul>
              <li v-for="(item,index) in productlist" :key="index" v-show="index<4">
                <nuxt-link :to="{name: 'news-newsDetails',query:{id:item.oid}}">
                  <img :src="item.mainPhoto?uploadurl+item.mainPhoto:'../../static/newsImg/1.jpg'" />
                  <div class="hint">
                    <p>{{item.title}}</p>
                    <span>{{item.createTime}}</span>
                  </div>
                </nuxt-link>
                <div class="clear"></div>
              </li>
            </ul>
            <div class="clear"></div>
          </div>
        </div>
      </div>

      <!--公司新闻-->

      <div class="conNews">
        <div class="block">
          <nuxt-link :to="{name: 'news-newsCompany'}">
            <div class="header">
              <div class="title">公司新闻</div>
              <div class="right">
                MORE
                <div>
                  <span></span>
                  <img src="../../static/newsImg/right1.png" />
                </div>
              </div>
            </div>
          </nuxt-link>
          <div class="list">
            <ul>
              <li v-for="(item,index) in newlist" :key="index" v-show="index<3">
                <nuxt-link :to="{name: 'news-newsDetails',query:{id:item.oid}}">
                  <div class="cont">
                    <p class="time">{{item.createTime}}</p>
                    <p class="title">{{item.title}}</p>
                    <div class="msg">{{item.description}}</div>
                  </div>
                </nuxt-link>
              </li>
              <div class="clear"></div>
            </ul>
          </div>
        </div>
      </div>

      <!--资料更新日志-->
      <div class="updateLog">
        <div class="block">
          <div class="header">
            <div class="title">资料更新日志</div>
            <div class="right">
              MORE
              <div>
                <span></span>
                <img src="../../static/newsImg/right1.png" />
              </div>
            </div>
          </div>
          <div class="content">
            <div class="tab">
             <div class="HdataCLN">                                
              <a :class="[type==0?'on':'']" @click="changedata(0)">ALL</a>
              <a :class="[type==1?'on':'']" @click="changedata(1)">认证</a>
              <a :class="[type==2?'on':'']" @click="changedata(2)">样本</a>
              <a :class="[type==3?'on':'']" @click="changedata(3)">手册</a>
              <a :class="[type==4?'on':'']" @click="changedata(4)">软件</a>
              <a :class="[type==5?'on':'']" @click="changedata(5)">CAD</a>
              <a :class="[type==6?'on':'']" @click="changedata(6)">视频</a>
              <a :class="[type==7?'on':'']" @click="changedata(7)">样本库</a>
              <a :class="[type==8?'on':'']" @click="changedata(8)">其他</a>
              <div class="clear"></div> 
            </div>
              <ul class="tabContent HdataCLS">
                 <li v-for="(item,index) in downAllVos" :key="index">
                 <nuxt-link :to="{name: 'datacenter'}">
                    <h2>{{item.title}}</h2>
                    <h3>{{item.productFirstName}}</h3>
                    <p>{{item.createTime}}</p>
                    <div class="clear"></div>
                  </nuxt-link>
                </li>
              </ul>
              <div class="clear"></div>
            </div>
            <div class="seek">
              <div class="seekCont">
                <img src="../../static/images/HdataCR.png" />
                <form action>
                  <div class="seekForm">
                    <div class="formTitle">产品大类</div>
                    <div class="formSelect">
                      <el-select v-model="value" filterable placeholder="请选择" style="width: 100%">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="seekForm">
                    <div class="formTitle">产品小类</div>
                    <div class="formSelect">
                      <el-select v-model="value" filterable placeholder="请选择" style="width: 100%">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="seekForm">
                    <div class="formTitle">资料种类</div>
                    <div class="formSelect">
                      <el-select v-model="value" placeholder="请选择" style="width: 100%">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="seekForm">
                    <div class="formTitle"></div>
                    <div class="seekBtn">
                      <span>搜索</span>
                    </div>
                  </div>
                </form>
              </div>
              <div class="clear"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 链接 -->
    <Insidelink></Insidelink>

    <!-- 底部 -->
    <HomeHooter></HomeHooter>
  </div>
</template>

<script>
import $ from "jquery";
import "@/assets/css/news.css";
import InsideHeader from "@/components/head";
import HomeHooter from "@/components/footer";
import crumb from "@/components/crumb";
import Insidelink from "@/components/link";
import qs from 'qs';
export default {
  name: "newsIndex",
  components: {
    InsideHeader,
    HomeHooter,
    crumb,
    Insidelink
  },
  data() {
    return {
       bannerType:'news',
       type:0,
      options: [
        {
          value: "选项1",
          label: ""
        },
        {
          value: "选项2",
          label: ""
        },
        {
          value: "选项3",
          label: ""
        },
        {
          value: "选项4",
          label: ""
        },
        {
          value: "选项5",
          label: ""
        }
      ],
      value: "",
      tabId: 0,
      tabList: [],
      tabTitle: [
        {
          name: "ALL"
        },
        {
          name: "认证"
        },
        {
          name: "样本"
        },
        {
          name: "手册"
        },
        {
          name: "CAD"
        },
        {
          name: "视频"
        },
        {
          name: "FB程序库"
        },
        {
          name: "其他"
        }
      ],
      newsIssue: [
        {
          img: require("../../static/newsImg/2.jpg"),
          title: "FREQROL-CS80系列-凝缩多样化功能...",
          time: "2019.08.11"
        },
        {
          img: require("../../static/newsImg/3.jpg"),
          title: "iQ-F Reborn！再出发，成为客户的理想机",
          time: "2019.08.10"
        },
        {
          img: require("../../static/newsImg/4.jpg"),
          title: "新品推介| 方圆之间的平衡—LX7-FN17系...",
          time: "2019.08.09"
        },

        {
          img: require("../../static/newsImg/7.jpg"),
          title: "智能·智动 全新工业机器人MELFA FR系...",
          time: "2019.08.06"
        }
      ],
      newsList: [],
      newlist: [], //公司新闻
      productlist: [], //新品发布
      downAllVos:[],
      indexalldata:{}
    };
  },
  head() {
    return {
      title: "新闻资讯",
      meta: [
        { hid: "description", name: "description", content: "新闻资讯描述" }
      ]
    };
  },
  methods: {
    changedata(type) {
      this.type=type;
      if(type==0){
       this.downAllVos=this.indexalldata.downAllVos
      }else if(type==1){
       this.downAllVos=this.indexalldata.downCertificationVos
      }else if(type==2){
       this.downAllVos=this.indexalldata.downCatalogVos
      }else if(type==3){
       this.downAllVos=this.indexalldata.downManualVos
      }else if(type==4){
       this.downAllVos=this.indexalldata.downSoftwareVos
      }else if(type==5){
       this.downAllVos=this.indexalldata.downCadindexVos
      }else if(type==7){
         location.href="http://cn.mitsubishielectric.com/fa/zh/MelsoftLibrary/fasite_contents/chinese.html"
      }
    },
    headRAf() {
      $(".headRS").show();
      $(".headRAf").hide();
    },

    // 公司新闻
    newList() {
      let id = this.$axios,
        params = {
          page: 1,
          type: 2,
          limit: 10,
          title: ""
        };
      this.$api.homeindex.newlist(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
            this.indexalldata = result.data;
          this.newlist = result.data.data;
        }
      });
    },

    //新品发布
    productList() {
      let id = this.$axios,
        params = {
          page: 1,
          type: 1,
          limit: 10,
          title: ""
        };
      this.$api.homeindex.newlist(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          this.productlist = result.data.data;
        }
      });
    },
    // 资料数据
    homeAlldata() {
      let id = this.$axios,
        params = {
        };
      this.$api.homeindex.homeAlldata(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          //资料中心
          this.downAllVos=result.data.downAllVos
        }
      });
    }
  },
  created() {
    //公司新闻
    this.newList();
    //新品发布
    this.productList();
    this.homeAlldata()
  },
  mounted(){
     this.uploadurl=this.comsys.uploadurl()
  }
};
</script>

<style scoped>
</style>
